<header th:fragment="header" class="main-header"
        xmlns:th="http://www.thymeleaf.org"
        xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
    <!-- Logo -->
    <a th:href="@{/admin/index2.html}" class="logo">
        <!-- mini logo for sidebar mini 50x50 pixels -->
        <span class="logo-mini"><b>A</b>LT</span>
        <!-- logo for regular state and mobile devices -->
        <span class="logo-lg"><b>Admin</b>LTE</span>
    </a>
    <!-- Header Navbar: style can be found in header.less -->
    <nav class="navbar navbar-static-top">
        <!-- Sidebar toggle button-->
        <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
            <span class="sr-only">Toggle navigation</span>
        </a>

        <div class="navbar-custom-menu">
            <ul class="nav navbar-nav">
                <!-- 私信 -->
                <li class="dropdown messages-menu">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        <i class="fa fa-envelope-o"></i>
                        <span class="label label-success notify-messages-label"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li class="header">私信</li>
                        <li>
                            <!-- inner menu: contains the actual data -->
                            <ul class="menu" id="notify-message">
                                <li class="text-center">暂无私信</li>
                            </ul>
                        </li>
                        <li class="footer"><a href="#">使用聊天查看更多</a></li>
                    </ul>
                </li>
                <!-- 通知:订阅 -->
                <!--<li class="dropdown notifications-menu">-->
                <!--<a href="#" class="dropdown-toggle" data-toggle="dropdown">-->
                <!--<i class="fa fa-bell-o"></i>-->
                <!--<span class="label label-warning">10</span>-->
                <!--</a>-->
                <!--<ul class="dropdown-menu">-->
                <!--<li class="header">通知</li>-->
                <!--<li>-->
                <!--&lt;!&ndash; inner menu: contains the actual data &ndash;&gt;-->
                <!--<ul class="menu" id="notify-remind">-->
                <!--<li class="text-center">-->
                <!--暂无通知-->
                <!--</li>-->
                <!--</ul>-->
                <!--</li>-->
                <!--<li class="footer"><a href="#">查看更多</a></li>-->
                <!--</ul>-->
                <!--</li>-->
                <!-- 公告 -->
                <li class="dropdown announce-menu tasks-menu">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        <i class="fa fa-flag-o"></i>
                        <span class="label label-danger notify-announce-label"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li class="header">公告</li>
                        <li>
                            <!-- inner menu: contains the actual data -->
                            <ul class="menu" id="notify-announce" style="margin: 0 5px;">
                                <li class="text-center">暂无公告</li>
                            </ul>
                        </li>
                        <li class="footer">
                            <a href="#">查看更多</a>
                        </li>
                    </ul>
                </li>
                <!-- User Account: style can be found in dropdown.less -->
                <li class="dropdown user user-menu">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        <!--160x160-->
                        <img th:src="@{__${#authentication.getPrincipal().avatar}__(w=160, h=160)}" class="user-image"
                             alt="User Image">
                        <span class="hidden-xs" sec:authentication="name">用户名</span>
                    </a>
                    <ul class="dropdown-menu">
                        <!-- User image -->
                        <li class="user-header">
                            <img th:src="@{__${#authentication.getPrincipal().avatar}__(w=160, h=160)}"
                                 class="img-circle" alt="User Image">

                            <p>
                                <small>Member since Nov. 2012</small>
                            </p>
                        </li>
                        <!-- Menu Body -->
                        <li class="user-body">
                            <div class="row">
                                <!--<div class="col-xs-6 text-center">-->
                                <!--<a href="#">私信</a>-->
                                <!--</div>-->
                                <!--<div class="col-xs-6 text-center">-->
                                <!--<a href="#">通知</a>-->
                                <!--</div>-->
                                <!--<div class="col-xs-4 text-center">-->
                                <!--<a href="#">Friends</a>-->
                                <!--</div>-->
                            </div>
                            <!-- /.row -->
                        </li>
                        <!-- Menu Footer-->
                        <li class="user-footer">
                            <div class="pull-left">
                                <a href="#" class="btn btn-default btn-flat">个人中心</a>
                            </div>
                            <div class="pull-right">
                                <form th:action="@{/admin/logout}" method="POST">
                                    <input type="submit" class="btn btn-default btn-flat" value="退出"/>
                                </form>
                            </div>
                        </li>
                    </ul>
                </li>
                <!-- Control Sidebar Toggle Button -->
                <li>
                    <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
                </li>
            </ul>
        </div>
    </nav>
    <script>
        $(function () {
            var $notifyMessage = $('#notify-message');
            var $notifyAnnounce = $('#notify-announce');
            var $notifyRemind = $('#notify-remind');
            var $notifyMessageLabel = $('.notify-messages-label')

            var notify = {
                requestMessage: function (page, size) {
                    var that = this;
                    $.post('/admin/message/notify', {
                        type: 'Message',
                        page: page,
                        size: size
                    }, function (rs) {
                        if (rs.code === 200) {
                            that.addMessage(rs.data.result)
                        } else {
                            layer.msg(rs.message);
                        }
                    });
                },
                requestAnnounce: function (page, size) {
                    var that = this;
                    $.post('/admin/message/notify', {
                        type: 'Announce',
                        page: page,
                        size: size
                    }, function (rs) {
                        if (rs.code === 200) {
                            that.addAnnounce(rs.data.result[0])
                        } else {
                            layer.msg(rs.message);
                        }
                    });
                },
                requestRemind: function (page, size) {
                    var that = this;
                    $.post('/admin/message/notify', {
                        type: 'Remind',
                        page: page,
                        size: size
                    }, function (rs) {
                        if (rs.code === 200) {
                            that.addRemind(rs.data.result)
                        } else {
                            layer.msg(rs.message);
                        }
                    });
                },
                addMessage: function (userNotifies) {
                    if (userNotifies.length > 0) {
                        $notifyMessage.empty();
                        $.each(userNotifies, function (i, userNotify) {
                            $notifyMessage.append('<li>\n' +
                                '                                    <a href="#">\n' +
                                '                                        <div class="pull-left">\n' +
                                '                                            <img src="' + userNotify.notify.sender.avatar + '" class="img-circle"\n' +
                                '                                                 alt="User Image">\n' +
                                '                                        </div>\n' +
                                '                                        <h4>\n' + userNotify.notify.sender.username +
                                '                                            <small><i class="fa fa-clock-o"></i> ' + moment(userNotify.notify.createdAt).fromNow() + '</small>\n' +
                                '                                        </h4>\n' +
                                '                                        <p>' + $('<div/>').text(userNotify.notify.content).html() + '</p>\n' +
                                '                                    </a>\n' +
                                '                                </li>');
                        })
                    }
                },
                addAnnounce: function (userNotify) {
                    if (!!userNotify) {
                        $notifyAnnounce.empty();
                        $notifyAnnounce.append(userNotify.notify.content);
                    }
                },
                addRemind: function (userNotifies) {
                    if (userNotifies.length > 0) {
                        $notifyRemind.empty();
                        $.each(userNotifies, function (i, userNotify) {
                            // 可以进行消息的分类[文章..]
                            $notifyRemind.append('<li>\n' +
                                '                <a href="#">\n' +
                                '                <i class="fa fa-users text-aqua"></i>' + userNotify.notify.content +
                                '                </a>\n' +
                                '                </li>');
                        })
                    }
                },
                init: function () {
                    var that = this;
                    $(document).on('show.bs.dropdown', '.messages-menu', function () {
                        $notifyMessageLabel.text('');
                        that.requestMessage(1, 5);
                    });
                    $(document).on('show.bs.dropdown', '.notifications-menu', function () {
                        that.requestRemind(1, 5);
                    });
                    $(document).on('show.bs.dropdown', '.announce-menu', function () {
                        $('.notify-announce-label').text('');
                        that.requestAnnounce(1, 1);
                    });
                }

            };
            notify.init();


            layui.use(['layim'], function () {
                var $ = layui.jquery,
                    layim = layui.layim,
                    stompClient;
                //
                var socket = new SockJS('/socket');
                stompClient = Stomp.over(socket);
                var token = $("meta[name='_csrf']").attr('content');
                var header = $("meta[name='_csrf_header']").attr('content');
                var headers = {};
                headers[header] = token;
                stompClient.connect(headers, function (frame) {
                    // 接收私信
                    stompClient.subscribe('/user/queue/messages', function (rs) {
                        var body = JSON.parse(rs.body);
                        console.log("body", body)
                        if (body.type === 1) {
                            var text = $notifyMessageLabel.text();
                            $notifyMessageLabel.text((!!text ? parseInt(text) : 0) + 1);
                            layim.getMessage(body.data);
                            console.log(body.data);
                            stompClient.send("/app/messages/reply", {}, JSON.stringify({
                                type: 1,
                                data: {
                                    type: 1,
                                    id: [body.userNotifyId]
                                }
                            }));
                        }
                    });
                    stompClient.subscribe('/topic/update/announcement', function (rs) {
                        var body = JSON.parse(rs.body);
                        $('.notify-announce-label').text('1');
                    });
                });

                layim.config({
                    title: '聊天',
                    init: {
                        url: '/api/v1/im/init',
                        type: 'POST'
                    },
                    members: {
                        url: '',
                        data: {}
                    },
                    brief: false,
                    min: true,
                    isgroup: true,
                    voice: false,
                    copyright: true,
                    find: '/api/v1/im/find.html',
                    chatLog: '/api/v1/im/chat-log.html'
                }).on('ready', function (res) {
                    $.get('/api/v1/im/unready?tag=message');
                }).on('sendMessage', function (data) {
                    stompClient.send("/app/reply", {}, JSON.stringify({
                        type: 1,
                        data: data
                    }));
                });
            });
        });
    </script>
</header>